<template>
  <div class="app-warp">
    <div class="app-container">
      <div class="let-panel">
        <ul class="menu-list">
          <li :class="{active:curIndex===1}" @click="curIndex=1">日历</li>
          <li :class="{active:curIndex===2}" @click="curIndex=2">翻页时钟</li>
          <li :class="{active:curIndex===3}" @click="curIndex=3">翻转卡片</li>
          <li :class="{active:curIndex===4}" @click="curIndex=4">假期安排</li>
          <li :class="{active:curIndex===5}" @click="curIndex=5">无缝滚动</li>
          <li :class="{active:curIndex===6}" @click="curIndex=6">羊了个羊</li>
        </ul>
      </div>
      <div class="right-panel">
        <div v-show="curIndex===1" class="panel-item">
          <Calendar />
        </div>
        <div v-show="curIndex===2" class="panel-item">
          <FlipClock />
          <Tree v-for="(item,i) in list" :key="i" :tree="item" @toggle-open="toggle">
            <template slot-scope="{node}">
              <span class="fa" :class="node.children?'fa-folder-o':'fa-file-text-o'" />
              {{ node.name|| node.label }}
            </template>
          </Tree>
          <CodeEdit v-if="curIndex===2" />
        </div>
        <div v-show="curIndex===3" class="panel-item">
          <flip-panel />
          <CalendarPicker />
        </div>
        <div v-show="curIndex===4" class="panel-item">
          <HolidayManger />
        </div>
        <div v-if="curIndex===5" class="panel-item">
          <SeamlessScroll />
        </div>
        <div v-if="curIndex===6" class="panel-item">
          <YangYang />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Calendar from './components/Calendar'
import FlipClock from './components/FlipClock'
import FlipPanel from './components/FlipPanel'
import HolidayManger from './views/HolidayManger'
import CalendarPicker from './components/CalendarPicker'
import Tree from './components/TreeItem'
import CodeEdit from './components/CodeEdit'
import SeamlessScroll from './components/SeamlessScroll'
import YangYang from './components/YangYang'
const data = require('../../lib/data')
export default {
  name: 'App',
  components: {
    Calendar,
    FlipClock,
    FlipPanel,
    HolidayManger,
    CalendarPicker,
    Tree,
    CodeEdit,
    SeamlessScroll,
    YangYang
  },
  data() {
    return {
      curIndex: 1,
      list: [
        {
          label: '全国',
          children: [
            {
              label: '北京'
            }
          ]
        }
      ],
      dict: []
    }
  },
  created() {
    this.list[0].children = this.toTree(data.data)
  },
  methods: {
    getArea() {
      this.$http.get('./static/json/area.json')
        .then(({ body }) => {
          const list = [
            {
              value: 0,
              label: '全国',
              isOpen: false,
              children: body
            }
          ]
          this.list = list
        })
    },
    toggle(node) {
      console.log(node.id)
    },
    toTree(items) {
      console.time('对象引用')
      const map = {}
      const result = []
      items.forEach((item) => {
        map[item.id] = item
      })
      items.forEach((item) => {
        const parent = map[item.pid]
        if (parent) {
          if (!parent.children) {
            parent.children = []
          }
          parent.children.push(item)
        } else {
          result.push(item)
        }
      })
      console.timeEnd('对象引用')
      return result
    }
  }
}
</script>

<style lang="less">
  html,body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  .app-warp{
    width: 100%;
    min-height: 100%;
    background-color: #f4f8fc;
  }
  .app-container{
    width: 1200px;
    margin: 0 auto;
    padding: 15px;
    background-color: #ffffff;
    min-height: 540px;
  }
  .app-container:after{
    content: '';
    clear: both;
  }
  .let-panel{
    width: 220px;
    float: left;
  }
  .right-panel{
    margin-left: 220px;
  }
  .menu-list{
    list-style: none;
    padding: 0;
    margin: 0 15px 0 0;
  }
  .menu-list li{
    line-height: 36px;
    font-size: 14px;
    padding: 0 15px;
    cursor: pointer;
  }
  .menu-list li:hover{
    background-color: #fafafa;
    color: #3a8ee6;
  }
  .menu-list li.active{
    color: #3a8ee6;
    background-color: #f2f2f2;
  }
  .tree-item,.tree-list{
    position: relative;
  }
  .tree-item .tree-point-line{
    position: absolute;
    border-top: 1px dotted #333333;
    width: 10px;
    top: 15px;
    margin-left: -4px;
  }
  .tree-list-line{
    position: absolute;
    display: block;
    width: 1px;
    border-left: 1px dotted #333333;
    left: 10px;
    bottom: 15px;
    top: -5px;
    z-index: 99;
    margin-left: 15px;
  }
  .tree-item .tree-title{
    line-height: 30px;
    font-size: 14px;
    color: #666666;
  }
  .tree-item .tree-title>i:first-child{
    font-size: 20px;
    color: #a7a7a7;
    margin-right: 5px;
  }
  .tree-item .tree-title:hover{
    background-color: #f2f2f2;
  }
</style>
